<template>
	<view class="box">
		<view class="memberbox">
			<image class="memberbox-bottom" src="/static/member/memberbottom.png" mode=""></image>
			<view class="memberbox-content">
				<image class="memberbox-content-back" :src="image" mode=""></image>
				<view class="memberbox-content-box">
					<view class="mcb-top">
						<view class="mcb-top-left">
							<image class="mcb-top-cover" :src="userinfo.avatarUrl||'/static/member/backone.png'"
								mode=""></image>
							<!-- <text class="mcb-top-name" >{{userInfo.nickname}}</text> -->
							<!-- <view class="mcb-top-class">
								<image class="mcb-top-class-image" src="@/pagesA/static/member/memberV.png" mode=""></image>
							</view> -->
							<view>
								<image v-if="level>0" class="mcb-top-class" :src="levelIcon" mode=""></image>
								<text class="mcb-top-gradeName" :style="{'color':colorValue}" >{{detailData.gradeName}}</text>
							</view>
							
						</view>
						<image v-if="level > 0" @click="goBuy" class="mcb-top-right" :src="rightImage" mode=""></image>
					</view>
					<!-- 会员券包 2.0 asher修改 -->
					<!-- <view v-if="level>0&&level<10" class="mcb-hint" :style="{color:colorValue}">再花{{money}}元可升级V{{Number(level)+1}}</view> -->
					<view v-if="level==0" class="mcb-hint">您还不是V+会员，购买券包后可以成为V+会员</view>
				</view>
			</view>
		</view>
		<view>
			<scroll-view v-if="dataList.length > 0" scroll-x="true" style="width: 100%;" class="member-names-container">
				<view class="member-name" v-for="(itemv,indexv) in dataList" :key="indexv"
					@click="changeCurrentTicketGroup(itemv, indexv)">
					<text :class="currentIndex === indexv && 'member-name_active'">{{itemv.title}}</text>
					<view class="voucher-list-container">
						<view class="voucher_list" v-for="(item,index) in itemv.couponVos" :key="index">
							<view class="voucher_list_item">
								<view class="voucher_list_item_top">
									<view class="voucher_list_item_top_left"
										style="width: 230rpx;padding: 10rpx;">
										
										<!-- 核销券显示形式 -->
										<!-- FULL_MINUS("满减券",10),
										    DISCOUNT("折扣券", 20),
										    CALCEL("核销券",30),
										    GOODS("商品券",40),
										    BUY("购买券",50),
										    RECHARGE("充值券",60), -->
										<view v-if="item.couponType == 20">
											<text class="voucher_name">打{{item.discount}}折</text>
										</view>
										<text v-if="item.couponType == 20 || item.couponType == 30" class="voucher_list_item_top_left_fullmoney">
											满{{Math.floor(item.minPrice)}}元可用
										</text>
										<view class="voucher_list_item_top_left_money" v-if="item.couponType == 10 || item.couponType == 40 || item.couponType == 50 || item.couponType == 60">
											<text class="voucher_list_item_top_left_money_sign">￥</text>
											<text
												class="voucher_list_item_top_left_money_amount">{{Number(item.reducePrice)}}</text>
										</view>
										<text v-if="item.couponType == 10 || item.couponType == 40 || item.couponType == 50 || item.couponType == 60" class="voucher_list_item_top_left_fullmoney">
											满{{Math.floor(item.minPrice)}}元可用
										</text>
										<view style="margin-top: 10rpx;">
											<text class="voucher_list_item_top_left_fullmoney">共{{item.num}}张</text>
										</view>
									</view>
									<view class="voucher_list_item_top_right">
										<view class="voucher_list_item_top_right_information">
											<view class="voucher_list_item_top_right_information_effect">
												<text v-if="item.type === 'handsel_balance'" style="font-size: 30rpx;">
													返余额{{item.value}}元
												</text>
												<text v-else
													class="voucher_list_item_top_right_information_effect_left">
													{{item.name}}</text>
											</view>
											<text v-if="item.type === 'handsel_balance'"
												class="voucher_list_item_top_right_information_time">
												返至账户余额
											</text>
											<text v-else-if="item.type === '8'"
												class="voucher_list_item_top_right_information_time">
												购买券包时直接抵扣
											</text>
											<text v-else class="voucher_list_item_top_right_information_time">

												{{item.expireType==10?'领取后生效':'有效期至:'+ dayjs(item.endTimeText).format("YYYY-MM-DD")}}
											</text>
										</view>
										<!-- <view class="voucher_list_item_top_right_status" v-if="isBuy">
									<text @click="goHome" class="voucher_list_item_top_right_status_text">立即使用</text>
								</view> -->
									</view>
									<!-- // 核销券不在这边显示 -->
									<view v-show="item.cate && item.cate === '0'" class="vocher-amount">
										<text>共{{item.num}}张</text>
									</view>
								</view>
								<view class="voucher_list_item_bottom">
									<view class="voucher_list_item_bottom_condition">
										<text class="voucher_list_item_bottom_condition_text"
											:class="[item.isImage&&'voucher_list_item_bottom_condition_extext']">
											{{item.useRule}}
										</text>
									</view>
									<view @click="switchover(item)">
										<view class="voucher_list_item_bottom_imageview">
											<image class="voucher_list_item_bottom_image"
												:class="[item.isImage&&'voucher_list_item_bottom_eximage']"
												:src="'/static/my/pulldown.png'" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="voucher_center_buycc">
							<view @click="buyNow(itemv)" class="voucher_center_btn">
								¥{{itemv.price}} 立即购买</view>
						</view>
					</view>
				</view>

			</scroll-view>
			<view v-else class="empty_content">
				暂无券包活动
			</view>
		</view>
	</view>
</template>

<script>
	// import {pay} from '@/common/pay.js';
	// import Ticket from '../pages/ticket.vue'
	import dayjs from 'dayjs';
	export default {
		components: {
			// Ticket
		},
		data() {
			return {
				dayjs,
				detailData:"",
				dataList: [],
				memberBack: [{
						// url: '/static/member/backone.png',
						url: '/static/member/backtwo.png',
						// right: '/static/member/memberright1.png',
						right: '/static/member/memberright2.png',
						color: '#242C3B'
					},
					{
						url: '/static/member/backtwo.png',
						right: '/static/member/memberright2.png',
						color: '#FFE5C8'
					},
					{
						// url: '/static/member/backthree.png',
						url: '/static/member/backtwo.png',
						// right: '/static/member/memberright3.png',
						right: '/static/member/memberright2.png',
						color: '#735116'
					},
					{
						// url: '/static/member/backfour.png',
						url: '/static/member/backtwo.png',
						// right: '/static/member/memberright4.png',
						right: '/static/member/memberright2.png',
						color: '#5B2C1B'
					},
					{
						// url: '/static/member/backfive.png',
						url: '/static/member/backtwo.png',
						// right: '/static/member/memberright5.png',
						right: '/static/member/memberright2.png',
						color: '#FCEDAB'
					}
				],
				image: '',
				colorValue: '',
				level: 0,
				money: '',
				userinfo: {},
				levelIcon: '',
				levelIconList: [],
				rightImage: '',
				ticketGroupList: [{
					title: '会员活动券'
				}],
				isIphone: false,
				userInfo: {},
				statusThree: false,
				// 会员券包2.0 asher修改
				// 默认选中的券包索引
				currentIndex: 0,
				currentTicketGroup: {
					lists: [{
							cate: '1',
							num: 10,
							money: 390,
							type: 7,
							limit: 90,
							expire_format: '2024-09-09 11:34',
							rule: '适用范围: 上云峰0000',
							title: '进口肥料券'

						},
						{
							cate: '0',
							num: 10,
							money: 390,
							type: 7,
							limit: 90,
							expire_format: '2024-09-09 11:34',
							rule: '适用范围: 上云峰0000',
							title: '进口肥料券'

						}
					]
				},
				// 	核销类型 0-肥料券 1-参观券 2-指导券 map
				cateMap: {
					'10': '满减券',
					'20': '折扣券',
					'30': '核销券',
					'40': '商品券',
					'50': '充值券',
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getData();
			this.getShopVipUser();
			this.personalInformation();
		},
		onShareAppMessage: function() {
			// 分享用户
		},

		onShareTimeline: function() {
			// 分享朋友圈
		},
		methods: {
			personalInformation() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user/index/setting', {}, function(res) {
					console.log(res.data, '345653456')
					self.userinfo = res.data;

					uni.hideLoading();
				});

			},
			getData() {
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				let self = this;
				self._post('plus/vipPackage/listAll', {}, function(res) {
					const {
						data
					} = res;
					self.dataList = data;
					console.log(self.dataList, '234565432')
					uni.hideLoading()
				});
			},
			getShopVipUser() {
				// 获取会员等级
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				let self = this;
				self._post('user/user/detail', {}, function(res) {
					const {
						data
					} = res;

					self.level = data.gradeId
					self.detailData = data;
					
					console.log(self.level, 'self.level')
					if (self.level > 0) {
						if (self.level > 10) {
							self.level = 10
						}
						self.levelIcon = `/static/member/levelv${self.level}.png`
						self.image = self.memberBack[Math.floor((Number(self.level) - 1) / 2)].url
						self.colorValue = self.memberBack[Math.floor((Number(self.level) - 1) / 2)]
							.color
						self.rightImage = self.memberBack[Math.floor((Number(self.level) - 1) / 2)]
							.right
					}
					self.image = self.memberBack[0].url
					// self.colorValue = self.memberBack[0].color
					self.rightImage = self.memberBack[0].right
					uni.hideLoading()
				});

			},
			getShopVipLists() {
				return new Promise((resolve, reject) => {
					this.api.shopVipLists()
						.then(res => {
							let curPageData = res.data_list.map(item => {
								item.lists = item.lists.map(itemv => {
									itemv['isImage'] = false
									return itemv
								})
								return item
							})
							let temp = this.ticketGroupList.concat(curPageData);
							temp.forEach(item => {
								if (Number(item.handsel_balance) > 0) {
									item.lists.unshift({
										type: 'handsel_balance',
										value: Number(item.handsel_balance)
									})
								}
								item.lists.forEach(subItem => {
									if (subItem.type === '8') {
										subItem.cate = '8'
									}
								})
							})
							this.ticketGroupList = temp
							this.currentIndex = 0;
							this.currentTicketGroup = temp[this.currentIndex];

							return resolve(true)
						})
				})
			},

			buyNow(value) {
				// 先购买
				let self = this;
				self._post('plus/vipPackage/buy', {
					packageId: value.id
				}, (res) => {
					if (res.code == 1) {
						
						let pages = "/orderpages/order/cashier?res=" + JSON.stringify(res.data);
						self.gotoPage(pages, "reLaunch");
						// 支付
						// self._post('plus/vipPackage/pay', {
						// 	packageBuyId: res.data.recordId,
						// }, (resc) => {
						// 	const {
						// 		data
						// 	} = resc
						// 	uni.requestPayment({
						// 		provider: 'wxpay',
						// 		timeStamp: data.payment.timeStamp,
						// 		nonceStr: data.payment.nonceStr,
						// 		package: data.payment.packageValue,
						// 		signType: data.payment.signType,
						// 		paySign: data.payment.paySign,
						// 		success: res => {
						// 			uni.showToast({
						// 				title: '支付成功',
						// 				icon: 'none'
						// 			});
						// 			setTimeout(() => {
						// 				this.getData();
						// 				this.getShopVipUser();
						// 			}, 1500)

						// 		},
						// 		fail: res => {
						// 			self.showError('订单未支付成功', () => {
						// 				payError(result, fail, self);
						// 			});
						// 		},
						// 	});
						// });
					}

				});

			},

			goBuy() {
				this.gotoPage(`/userpage/userinfo/wallet?balance=${this.detailData.balance}`)
			},
			switchover(item) {
				item.isImage = !item.isImage
			},
			// 切换当前选中的券包
			changeCurrentTicketGroup(item, index) {
				this.currentIndex = index;
				this.currentTicketGroup = item;
			},
			// 支付成功刷新状态
			refreshDataAfterPay() {
				this.ticketGroupList = [];
				this.currentIndex = 0;
				this.currentTicketGroup = {
					lists: []
				}
				this.getData();
				this.getShopVipUser();
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		background: #FFFFFF;
	}

	.memberbox {
		position: relative;
		background: #FFFFFF;

		.memberbox-bottom {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 166.4rpx;
		}

		.memberbox-content {
			width: 690rpx;
			height: 266rpx;
			margin: 0 auto;
			padding-top: 48rpx;
			position: relative;

			.memberbox-content-back {
				position: absolute;
				top: 48rpx;
				left: 0;
				width: 690rpx;
				height: 266rpx;
				vertical-align: top;
			}

			.memberbox-content-box {
				display: flex;
				position: absolute;
				top: 48rpx;
				left: 0;
				width: 690rpx;
				height: 266rpx;
				z-index: 1;
				align-items: center;
				flex-direction: column;
				justify-content: center;

			}
		}
	}

	.memberbox-content-box {
		padding: 0 28rpx;
		box-sizing: border-box;

		// background: #FFFFFF;
		.mcb-top {
			width: 100%;
			justify-content: space-between;
			align-items: center;
			display: flex;

			.mcb-top-left {
				display: flex;
				align-items: center;
				align-items: flex-end;
				    gap: 10rpx;
				.mcb-top-gradeName{
					font-size: 28rpx;
					color: #f9e4ca;
				}
				.mcb-top-cover {
					width: 108rpx;
					height: 108rpx;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
					border-radius: 50%;
				}

				.mcb-top-name {
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #242C3B;
					line-height: 50rpx;
					margin: 0 20rpx;
				}

				.mcb-top-class {
					width: 88rpx;
					height: 48rpx;
					border-radius: 24rpx;
					display: block;
				}
			}

			.mcb-top-right {
				width: 222rpx;
				height: 64rpx;
				vertical-align: top;
			}
		}

		.mcb-hint {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #242C3B;
			line-height: 40rpx;
			margin-top: 36rpx;
			width: 100%;
		}
	}

	.voucher_list {
		position: relative;
		padding: 0 12rpx;

		&_item {
			padding: 0 20rpx;
			box-shadow: 0px 0px 40rpx 4px rgba(91, 74, 40, 0.1);
			border-radius: 8rpx;
			margin-bottom: 30rpx;
			width: calc(100% - 42rpx);

			&::before {
				content: '';
				position: absolute;
				height: 100%;
				width: 8px;
				right: 0;
				top: 0;
				background-image: radial-gradient(circle at 8px 10px, transparent 6px, white 6px);
				background-size: 8px 26px
			}

			&::after {
				content: '';
				position: absolute;
				height: 100%;
				width: 8px;
				left: 0;
				top: 0;
				background-image: radial-gradient(circle at 0px 10px, transparent 6px, white 6px);
				background-size: 8px 26px
			}

			&_top {
				padding: 24rpx 0;
				display: flex;
				align-items: center;

				&_left {
					width: 200rpx;
					height: 150rpx;
					background: linear-gradient(315deg, #F6E3B8 0%, #DAB279 100%);
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;

					&_money {
						display: flex;
						align-items: center;

						&_sign {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #735116;
							line-height: 34rpx;
							margin-top: 16rpx;
						}

						&_amount {
							font-size: 60rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #735116;
							line-height: 84rpx;
						}
					}

					&_fullmoney {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #735116;
						line-height: 34rpx;
					}

					.voucher_name {
						font-size: 54rpx;
						color: #735116;
					}
				}

				&_secondly {
					background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				}

				&_thirdly {
					background: linear-gradient(90deg, #5BB6FB 0%, #2F80F6 100%);
				}

				&_extra {
					background: #C8C8C8;
				}

				&_right {
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					flex: 1;
					min-height: 152rpx;

					&_information {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&_effect {
							display: flex;
							align-items: flex-start;

							&_left {
								flex: 1;
								font-size: 30rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 40rpx;
								margin-right: 8rpx;
							}

							&_right {
								width: 98rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 2rpx solid #FF5100;
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF5100;
								line-height: 28rpx;
								text-align: center;
								box-sizing: border-box;
								margin-top: 4rpx;
							}

							&_used {
								border-color: #C8C8C8;
								color: #C8C8C8;
							}

							&_stale {
								background-color: #C8C8C8;
							}
						}

						&_time {
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						&_amount {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						&_used {
							color: #999999;
						}

						&_stale {
							color: #999999;
						}
					}

					&_status {
						display: flex;
						align-items: center;

						&_text {
							width: 124rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							border: 2rpx solid #242C3B;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #242C3B;
							line-height: 44rpx;
							text-align: center;
							box-sizing: border-box;
						}

						&_secondly {
							border: 2rpx solid #FF5100;
							color: #FF5100;
						}

						&_thirly {
							border: 2rpx solid #2F80F6;
							color: #2F80F6;
						}
					}

					&_boximage {
						width: 136rpx;
						display: flex;
						align-items: center;

						image {
							width: 136rpx;
							height: 114rpx;
							vertical-align: top;
						}
					}
				}

				.vocher-amount {
					font-size: 28rpx;
					color: #333333;
					padding-top: 20rpx;
					padding-right: 10rpx;
				}
			}

			&_bottom {
				padding: 20rpx 0;
				border-top: 2rpx dashed #E5E5E5;
				display: flex;
				justify-content: space-between;

				&_condition {
					display: flex;
					flex-direction: column;
					width: calc(100% - 50rpx);

					&_text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&_extext {
						overflow: inherit;
						text-overflow: inherit;
						white-space: inherit;
					}
				}

				&_imageview {
					height: 34rpx;
					width: 44rpx;
					margin-right: -10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_image {
					width: 24rpx;
					height: 14rpx;
					vertical-align: top;
					// margin-top: 10rpx;
					// margin-left: 24rpx;
					transform: rotate(0);
					// transition: 0.3s ease-in-out;
				}

				&_eximage {
					transform: rotate(-180deg);
				}
			}
		}
	}

	.member-names-container {


		.member-name {
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			padding-left: 30rpx;
			color: #999999;

			text {
				font-size: 32rpx;
			}

			&_active {
				color: #1F1F1F
			}
		}
	}

	.voucher-list-container {
		background: #FFFFFF;
		padding: 10rpx 30rpx;
	}

	.empty_content {
		color: #999999;
		text-align: center;
		justify-content: center;
		padding-top: 240rpx;
	}

	.voucher_center_buycc {
		width: 100%;
		height: 108rpx;
		margin-top: 40rpx;
		background-color: #FFFFFF;

		.voucher_center_btn {
			height: 108rpx;
			background: #332E28;
			border-radius: 59rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFDA9A;
			line-height: 108rpx;
			text-align: center;
		}
	}
</style>